<!--  -->
<template>
  <div>
     <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="data-title">实时数据</span>
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="6">
                <div class="data-box">
                  3
                </div>
                <div class="data-text">今日接口总数</div>
              </el-col>
               <el-col :span="6">
                <div class="data-box">
                  222
                </div>
                <div class="data-text">今天访问次数</div>
              </el-col>
               <el-col :span="6">
                <div class="data-box">
                  0.00
                </div>
                <div class="data-text">当前QPS</div>
              </el-col>
               <el-col :span="6">
                <div class="data-box">
                  0
                </div>
                <div class="data-text">当前并发数</div>
              </el-col>
            </el-row>
          </div>
        </el-card>
     <el-card class="box-card">
        <el-row :gutter="20">
          <el-col :span="6" style="text-align: left;font-size:15px">
              <span>资源分类 &nbsp;&nbsp;&nbsp;</span>
              <el-select v-model="value" placeholder="请选择" size="small">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-col> 
          <el-col :span="6">
             <el-alert
              title="当启用appid或来源IP限流时，才统计相关流量数据"
              type="error"
              :closable="false"
              show-icon
              class="alert-msg"
              >
            </el-alert>  
          </el-col> 
        </el-row>  
         <el-row :gutter="20">
          <el-col :span="6" style="text-align: left;font-size:15px">
              <span>前端服务名 &nbsp;&nbsp;&nbsp;</span>
              <el-select v-model="value2" placeholder="请选择" size="small">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-col>  
          <el-col :span="5" style="text-align: left;font-size:15px">
              <span>服务器IP &nbsp;&nbsp;&nbsp;</span>
              <el-select v-model="value3" placeholder="全部节点" size="small">
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-col> 
          <el-col :span="8">
             <span>时间范围 &nbsp;&nbsp;&nbsp;</span>
                <el-date-picker
                  size="small"
                  v-model="value4"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
          </el-col> 
          <el-col :span="2">
            <el-button type="primary" size="small">查询</el-button>
          </el-col>
        </el-row> 
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="border-box green-box">
              <div>
                 <div class="num-box">0mS</div>
                 <div>最小响应时间</div>
              </div>
            </div>
          </el-col>
           <el-col :span="4">
            <div class="border-box red-box">
              <div>
                 <div class="num-box">1mS</div>
                 <div>最大响应时间</div>
              </div>
            </div>
          </el-col>
           <el-col :span="4">
            <div class="border-box blue-box">
              <div>
                 <div class="num-box">0mS</div>
                 <div>平均响应时间</div>
              </div>
            </div>
          </el-col>
           <el-col :span="4">
            <div class="border-box yellow-box">
              <div>
                 <div class="num-box">0.16</div>
                 <div>平均QPS</div>
              </div>
            </div>
          </el-col>
           <el-col :span="4">
            <div class="border-box pure-box">
              <div>
                 <div class="num-box">0mS</div>
                 <div>最小响应时间</div>
              </div>
            </div>
          </el-col>
           <el-col :span="4">
            <div class="border-box black-box">
              <div>
                 <div class="num-box">0mS</div>
                 <div>最小响应时间</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div id="avgChart" :style="{width: '650px', height: '300px'}">
             </div>
          </el-col>
          <el-col :span="12">
           <div id="qpsChart" :style="{width: '650px', height: '300px'}">
             </div>
          </el-col>
        </el-row>
         <el-row>
          <el-col :span="12">
            <div id="eruptChart" :style="{width: '650px', height: '300px'}">
             </div>
          </el-col>
          <el-col :span="12">
           <div id="reqChart" :style="{width: '650px', height: '300px'}">
             </div>
          </el-col>
        </el-row>
     </el-card>
     <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h4>最近24小时 TOP 10</h4>
        </div>
        <div >
          <el-row>
            <el-col :span="6">
               <div class="slow-container">
                  <h3>Top 10 慢服务</h3>
                  <div class="content">
                  <div>
                    1. 6ms [jyfrontend]
                  </div>
                  <div>
                    2. 4ms [pgr-service]
                  </div>
                  <div>
                     3. 1ms [test]
                  </div>
                  </div>
               </div>
            </el-col>
             <el-col :span="6">
               <div class="slow-container">
                  <h3 style="color: #F56C6C">Top 10 异常服务</h3>
                  <div class="content">
                  <div>
                    1. 6ms [jyfrontend]
                  </div>
                  <div>
                    2. 4ms [pgr-service]
                  </div>
                  <div>
                     3. 1ms [test]
                  </div>
                  </div>
               </div>
            </el-col>
             <el-col :span="6">
               <div class="slow-container">
                  <h3 style="color: #67c23A">Top 10 活跃服务</h3>
                  <div class="content">
                  <div>
                    1. 6ms [jyfrontend]
                  </div>
                  <div>
                    2. 4ms [pgr-service]
                  </div>
                  <div>
                     3. 1ms [test]
                  </div>
                  </div>
               </div>
            </el-col>
             <el-col :span="6">
               <div class="slow-container">
                  <h3 style="color: #409EFF">Top 10 AppID</h3>
                  <div class="content">
                  <div>
                    1. 6ms [jyfrontend]
                  </div>
                  <div>
                    2. 4ms [pgr-service]
                  </div>
                  <div>
                     3. 1ms [test]
                  </div>
                  </div>
               </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    <el-card>
        <el-row :gutter="20">
          <el-col :span="7">
             <span>网关分组 &nbsp;&nbsp;&nbsp;</span>
              <el-select v-model="value3" placeholder="全部节点" size="small">
                <el-option
                  v-for="item in options3"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
          </el-col>
           <el-col :span="10">
             <span>时间范围 &nbsp;&nbsp;&nbsp;</span>
                <el-date-picker
                  size="small"
                  v-model="value4"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
          </el-col> 
        </el-row>

        <el-row>
           <el-col :span="12">
             <div id="myChart" :style="{width: '650px', height: '300px'}">
             </div>
          </el-col>
           <el-col :span="12">
            <div id="chartRight" :style="{width: '650px', height: '300px'}"></div>
          </el-col>
        </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
        options: [{
          value: '1',
          label: '服务/接口'
        }, {
          value: '2',
          label: 'appID'
        }, {
          value: '3',
          label: '来源IP'
        }],
        value: '1',
        options2: [{
          value: '1',
          label: '22222'
        }, {
          value: '2',
          label: '/api/test'
        }, {
          value: '3',
          label: '3333'
        }],
        value2: '',
        options3: [{
           value: '1',
          label: '10.2.2.2'
        }],
        value3: '',
        value4: ''
    };
    
  },

  components: {},

  computed: {},

  mounted() {
    let myChart = this.$echarts.init(document.getElementById("myChart"));
     let  option = {
       title: {
         text: '接口总数'
       },
    xAxis: {
      type: 'category',
      data: ['2021-10-03', '2021-10-04', '2021-10-05','2021-10-06','2021-10-07','2021-10-08',
      '2021-10-09', '2021-10-10', '2021-10-11','2021-10-12','2021-10-13','2021-10-14',
      ]
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [5,3,4, 6, 9,11,12,15,11,18,21,22],
        type: 'line',
        color: '#409EFF',
        lineStyle: {
        normal: {
           color: '#409EFF',
            borderColor:'#fff'
        },
      }
      }
    ]

    
};
    let chartRight = this.$echarts.init(document.getElementById("chartRight"));
     let  option2 = {
       title: {
         text: '访问次数'
       },
    xAxis: {
      type: 'category',
      data: ['2021-10-03', '2021-10-04', '2021-10-05','2021-10-06','2021-10-07','2021-10-08',
      '2021-10-09', '2021-10-10', '2021-10-11','2021-10-12','2021-10-13','2021-10-14',
      ]
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [13000,13000,13000, 13000, 13000,13000,13000,13000,13000, 13000, 13000,7500,],
        type: 'line',
        lineStyle: {
        normal: {
           color: 'red',
          borderColor:'#fff'
        },
      }
      }
    ]

    
};

 let avgChart = this.$echarts.init(document.getElementById("avgChart"));
     let  option4 = {
       title: {
         text: 'QPS'
       },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2021-10-03', '2021-10-04', '2021-10-05','2021-10-06','2021-10-07','2021-10-08',
      '2021-10-09', '2021-10-10', '2021-10-11','2021-10-12','2021-10-13','2021-10-14',
      ]
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [0,1,1.6, 0, 0.6,0,0,0.1,0.2, 1.8, 1.4,0.3,],
        type: 'line',
        symbol:'none',
        lineStyle: {
        normal: {
           color: '#67C23A',
        },
      },
       areaStyle: {
        color: '#67C23A',
        opacity: 0.2
      },
      smooth: true,

      },
    ]
    
};

 let qpsChart = this.$echarts.init(document.getElementById("qpsChart"));
     let  option3 = {
       title: {
         text: '平均响应时间'
       },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2021-10-03', '2021-10-04', '2021-10-05','2021-10-06','2021-10-07','2021-10-08',
      '2021-10-09', '2021-10-10', '2021-10-11','2021-10-12','2021-10-13','2021-10-14',
      ]
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [0,1,1.3, 1.5, 0.6,0,0,0.4,0.2, 1.1, 1.3,0.7,],
        type: 'line',
        symbol:'none',
        lineStyle: {
        normal: {
           color: '#67C23A',
        },
      },
       areaStyle: {
        color: '#67C23A',
        opacity: 0.2
      },
      smooth: true,

      },
    ]
    
};
let eruptChart = this.$echarts.init(document.getElementById("eruptChart"));
     let  option5 = {
       title: {
         text: '并发数'
       },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2021-10-03', '2021-10-04', '2021-10-05','2021-10-06','2021-10-07','2021-10-08',
      '2021-10-09', '2021-10-10', '2021-10-11','2021-10-12','2021-10-13','2021-10-14',
      ]
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [0,1,1, 0, 1.5,0,0,0.4,0.2, 1.1, 0,0,],
        type: 'line',
        symbol:'none',
        lineStyle: {
        normal: {
           color: '#67C23A',
        },
      },
       areaStyle: {
        color: '#67C23A',
        opacity: 0.2
      },
      smooth: true,

      },
    ]
    
};

let reqChart = this.$echarts.init(document.getElementById("reqChart"));
     let  option6 = {
       title: {
         text: '请求数'
       },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2021-10-03', '2021-10-04', '2021-10-05','2021-10-06','2021-10-07','2021-10-08',
      '2021-10-09', '2021-10-10', '2021-10-11','2021-10-12','2021-10-13','2021-10-14',
      ]
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [0,1,0, 0, 1,0,0,1.6,0.2, 1.8, 0,0,0.2,],
        type: 'line',
        symbol:'none',
        lineStyle: {
        normal: {
           color: '#67C23A',
        },
      },
       areaStyle: {
        color: '#67C23A',
        opacity: 0.2
      },
      smooth: true,

      },
    ]
    
};


  avgChart.setOption(option3);

  myChart.setOption(option);
  chartRight.setOption(option2);
  qpsChart.setOption(option4);
  eruptChart.setOption(option5);
  reqChart.setOption(option6);
},

  methods: {}
}

</script>
<style lang='scss' scoped>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 1600px;
    margin: 15px 0;
  }
  .data-title {
    font-weight: 700;
    font-size: 15px;
  }
  /deep/ .el-card__header {
     padding: 10px;
    text-align: left;
  }
  .data-box {
    color: #15a0ff;
    font-weight: 700;
    font-size: 35px;
    padding-bottom: 15px;
  }
  .data-text {
    color: #999;
  }
.el-row {
  margin: 15px 0;
} 
.alert-msg {
  border-radius: 30px;
  font-size: 5px;
} 
.border-box {
  width: 250px;
  height: 100px;
  border-radius: 20px;
 
  display: flex;
  align-items: center;
  justify-content: center;
  .num-box {
    padding: 10px 0;
    font-size: 30px;
  }
}
.green-box {
   border: 1px solid #67C23A;
   color: #67C23A;
}
.red-box {
   border: 1px solid #F56C6C;
   color: #F56C6C;
}
.blue-box {
  border: 1px solid #409EFF;
   color: #409EFF;
}
.yellow-box {
   border: 1px solid #E6A23C;
   color: #E6A23C;
}
.pure-box {
 border: 1px solid rgb(129, 60, 133);
   color: rgb(129, 60, 133);
}
.black-box {
 border: 1px solid #000;
   color: #000;
}
.slow-container {
  text-align: left;
  h3 {
    color: #E6A23C;
    font-weight: 600;
    font-size: 25px;
  }
  div {
    padding: 7px 0;
  }
}
</style>